<template>
  <div id="bp_swiper">
    <mt-swipe :auto="30000">
      <mt-swipe-item class="swiperList" v-for="(item, index) in bpswiper" :key="index">
        <router-link to="" v-for="(items, index) in item.list" :key="index">
          <ul>
            <li><img :src="items.img" alt="" srcset=""></li>
            <li>￥{{items.price}}</li>
            <li><span v-if="items.offered>=10000">{{items.offered/10000 | filtration}}万</span><span v-else>{{items.offered}}</span>人参团</li>
          </ul>
        </router-link>
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  name: 'bp_swiper',
  props: ['bpswiper'],
  data () {
    return {

    }
  },
  mounted () {

  },
  filters: {
    filtration (value) {
      let Val = parseFloat(value).toFixed(1)
      return Val
    }
  }
}
</script>

<style scoped lang="less">
#bp_swiper {
  height: 300px;
  overflow: hidden;
  .swiperList {
    display: flex !important;
    a {
      width: 33.33%;
      height: 100%;
      ul {
        li {
          text-align: center;
        }
        li:nth-of-type(1) {
          img {
            width: 200px;
            height: 200px;
          }
        }
        li:nth-of-type(2) {
          color: rgba(255, 0, 0, 1);
        }
        li:nth-of-type(3) {
          color: rgba(100, 100, 100, 0.9);
        }
      }
    }
  }
}
</style>
